<template>
  <div class="home">
    <!-- <img alt="Vue logo" src="../assets/logo.png"> -->
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <cube-button v-if="showBtn" class="btn" @click="showDialog"
      >show dialog</cube-button
    >
    <cube-button v-if="showBtn" class="btn" @click="$router.push('/login')"
      >go login page</cube-button
    >
    <cube-button v-if="showBtn" class="btn" @click="$router.push('/about')"
      >go about page</cube-button
    >
    <cube-input v-model="loginForm.username" clearable></cube-input>
    <cube-input v-model="loginForm.password" clearable></cube-input>
    <cube-button class="btn" @click="login(loginForm)">登录</cube-button>

    {{ token }}<br />
    {{ name }}<br />
    {{ avatar }}
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import { mapState, mapActions } from 'vuex'

export default {
  name: 'Home',
  components: {
    HelloWorld,
  },
  data() {
    return {
      loginForm: {
        username: 'muyu',
        password: '123456',
      },
    }
  },
  computed: {
    ...mapState(['showBtn']),
    ...mapState('user', ['token', 'name', 'avatar']),
  },
  mounted() {},
  methods: {
    ...mapActions('user', ['login']),
    showDialog() {
      this.$createDialog({
        type: 'alert',
        title: 'Alert',
        content: 'dialog content',
      }).show()
    },
  },
}
</script>

<style lang="scss" scoped>
.btn {
  width: 5rem;
  margin: auto;
}
</style>
